<template>
    <div class="area-title-box outer">
        <div class="name-box center-flex-box">
            <div class="outer">
                <p class="name">
                    {{name}}
                </p>
            </div>
        </div>
        <div class="area-operate center-flex-box">
            <el-button class="item" @click="attention" v-if="!attend">关注</el-button>
            <el-button class="item" @click="removeAttention" v-else>取消关注</el-button>
            <el-button class="item" @click="publishPost" type="success" plain>我要发帖</el-button>
            <el-button class="item" @click="goToAreaAttention" type="primary" plain>区域关注</el-button>
            <el-select class="item" v-model="desc" placeholder="排序点这里" @change="query">
                <el-option label="无" value="none"></el-option>
                <el-option label="回复数量" value="reply_count"></el-option>
                <el-option label="收藏数量" value="collect_count"></el-option>
                <el-option label="最新回复" value="last_reply_time"></el-option>
                <el-option label="发布时间" value="publish_time"></el-option>
            </el-select>
            <el-select class="item" v-model="type" placeholder="筛选点这里" @change="query">
                <el-option label="全部" value="-1"></el-option>
                <el-option label="COMMON" value="0"></el-option>
                <el-option label="精华" value="1"></el-option>
                <el-option label="活动" value="2"></el-option>
                <el-option label="指引" value="3"></el-option>
                <el-option label="求助" value="4"></el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'areaTitleBar',
        data () {
            return {
                type: '',
                desc: ''
            }
        },
        props: {
            id: String,
            name: String,
            attend: {
                type: Object,
                required: false,
                default: null
            }
        },
        methods: {
            query () {
                let desc = this.desc === 'none' ? '' : this.desc
                let type = this.type === '-1' ? '' : this.type
                this.$emit('query', { type, desc })
            },
            attention () {
                this.$emit('attention')
            },
            removeAttention () {
                this.$emit('removeAttention')
            },
            publishPost () {
                this.$router.push(`/area/${this.name}/publish`)
            },
            goToAreaAttention () {
                this.$router.push(`/attention/area/${this.id}`)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .center-flex-box {
        vertical-align: top;
        display: -webkit-inline-flex;
        justify-content: center;
        align-items: center;
    }

    .outer {
        display: inline-block;
        text-align: left;
        width: 100%;
    }

    .area-title-box {
        height: 80px;
        border-bottom: #b4b4b4 1px solid;
        margin: 0 0;

        .name-box {
            width: 25%;
            height: 100%;

            .name {
                font-size: 18px;
                font-weight: bolder;
                text-align: left;
            }
        }

        .area-operate {
            float: right;
            height: 100%;

            .item {
                margin: 5px;
            }
        }
    }
</style>
